import { Card, CardContent } from '@gm/shadcn-ui';
import { PasswordForm } from './passwordFrom';
import Image from 'next/image';
import placeholder from '@app/asset/image/placeholder.png';
import { MetadataGenerator } from '@gm/base/server';
import { initTranslations } from '@gm/locale/server';
import { TranslationsProvider } from '@gm/locale';

const i18nNamespaces = ['login'];

const { generateMetadata } = MetadataGenerator({
  namespaces: i18nNamespaces[0],
});

export { generateMetadata };

export default async function LoginPage(props: {
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await props.params;
  const { t, resources } = await initTranslations(locale, i18nNamespaces);

  return (
    <TranslationsProvider
      namespaces={i18nNamespaces}
      locale={locale}
      resources={resources}
    >
      <div className="w-full ml-[10%] h-full">
        <div className={'flex flex-col gap-6'}>
          <Card className="overflow-hidden">
            <CardContent className="grid p-0 md:grid-cols-2">
              <div className="relative  bg-muted md:block mx-3.5 my-3.5">
                <Image
                  src={placeholder}
                  alt="Image"
                  width={813}
                  height={738}
                  className="absolute inset-0  object-cover dark:brightness-[0.2] dark:grayscale"
                />
              </div>
              <PasswordForm className="mx-12" />
            </CardContent>
          </Card>
          <div className="text-balance text-center text-xs text-muted-foreground [&_a]:underline [&_a]:underline-offset-4 hover:[&_a]:text-primary">
            {t('agreeTerms')}
            <a href="#">{t('serviceTerms')}</a>
            {t('and')}
            <a href="#">{t('privacyPolicy')}</a>
          </div>
        </div>
      </div>
    </TranslationsProvider>
  );
}
